<template>
                  <div>
                  <!--title-->
                  <div class="content-title" ref="title"><div class= "su-title">
                   <i class="el-icon-tickets"> </i>
                  <span>角色权限</span>
                </div>
                  <div class="batch-but-css">
                    <el-button type="primary" icon="el-icon-plus el-icon--left" @click="titleAddClick">新增角色</el-button>
             <el-button type="danger" icon="el-icon-refresh el-icon--left" @click="tabsOrTableDialogEmpty">清空设置</el-button>
              </div>
                </div>

                  <!--tabs-->
                  <div class="common-tabs" ref="tabs">
                    <el-tabs v-model="tabsProp.active" @tab-click="tabsSwitchClick">
                    <el-tab-pane name="" label="全部"/>
                     </el-tabs>
                     </div>

                  <!--table-->
                  <template>
                    <!--表格前的按钮-->
                    <div class="common-table-title-but" ref="tableTopBut">
                       <el-button icon="el-icon-setting el-icon--left" @click="tabsOrTableSetClick('tableProp','筛表头配置')">配置表头</el-button> </div>
                      <!--表格内容-->
                      <el-table
                          ref="table"
                      :data="tableData"
                      border
                      style="width: 100%"
                      :max-height="tableProp.tableHeight"
                      :header-cell-style="{background:'#f5f7fa',color:'#081333',fontWeight: 'normal'}"
                      v-loading="tableProp.loading"
                      @selection-change="tableSelectionChange"
                      class="cc-table-style"
                      >
                      <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="角色名称" min-width="150" :show-overflow-tooltip="true" align="center" prop="B1"
                                v-if="Utils.tableShowFixed('角色名称',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('角色名称',this.toConfigureFieldDialog.tableProp).fixed"/>
          <el-table-column label="权限描述" min-width="150" :show-overflow-tooltip="true" align="center" prop="B3"
                                v-if="Utils.tableShowFixed('权限描述',this.toConfigureFieldDialog.tableProp).checkbox"
                         :fixed="Utils.tableShowFixed('权限描述',this.toConfigureFieldDialog.tableProp).fixed"/>
          <el-table-column label="操作"  width="235" align="center" fixed="right">
                              <template slot-scope="scope">
                              <el-button type="primary" icon="el-icon-view el-icon--left" @click="tableSeeClick(scope.row,0)">查看/编辑</el-button>
          <el-button type="danger" icon="el-icon-delete el-icon--left" @click="tableDelClick(scope.row,0)">删除</el-button>
           </template>
                             </el-table-column>
         </el-table>
                    <!--分页-->
                        <div class="common-pagination">
                          <el-pagination
                              @size-change="pageSizeChange"
                              @current-change="pageCurrentChange"
                              :current-page="paginationProp.currentPage"
                              :page-sizes="[10, 20, 50, 100,500,1000]"
                              :page-size="paginationProp.pageSize"
                              layout="total,sizes, prev, pager, next, jumper"
                              :total="paginationProp.total"
                          />
                        </div> </template>

                  <!--抽屉增加和修改-->
                  <el-drawer
                  :title="drawerProp.title"
                  :visible.sync="drawerProp.isDrawer"
                  direction="rtl"
                  :append-to-body="true"
                  :modal-append-to-body="false"
                  custom-class="common-drawer"
                  size="1050px"
                >
                      <div class="common-drawer-content" v-loading="drawerProp.loading">
                      <div class="parent">
                      <!--左边-->
                      <div class="leftChild">
                      <ul class="content">
                      <li :class="[drawerProp.active===0?'active':'']" @click="drawerActiveClick(0)">基础设置</li>
           </ul>
                </div>
                  <!--右边-->
                  <div class="rightChild">
                    <ul class="content" ref="scrollViewRight" @wheel.passive="addWheelChange" :style="{'height': drawerProp.rightProp.height+'px'}">
                    <li class="content-main" ref="drawerLi0">
                                    <div class="title">
                                      <span></span>
                                      <label>基础设置</label>
                                      <div class="s"></div>
                                      <template v-if="drawerProp.status==='see' && drawerProp.seeBut">
                                        <div class="n" @click="drawerEdit(0)">
                                          <i class="el-icon-edit"></i>
                                          编辑
                                        </div>
                                      </template>
                                    </div>
                                    <!--查看-->
                                    <div class="see" v-if="drawerProp.status!=='add' && drawerProp.status!=='edit'">
                                      <ul class="common-drawer-see">
                                      <li class="common-drawer-see-li ">
                                 <span class="common-drawer-see-li-title">角色名称</span>
                                 {{ formData.B1 }}
                               </li>
            <li class="common-drawer-see-li ">
                                 <span class="common-drawer-see-li-title">资源序号</span>
                                 <div>
                                  <label v-for="(item,key) in formData.B2" :key="key">
                                    <label v-for="(item2,key2) in formDataOption.B2Option" :key="key2">
                                      <label v-if="item== item2.value">
                                        {{ item2.label }}<i v-if="formData.B2.length>key+1">、</i>
                                      </label>
                                    </label>
                                  </label>
                                </div>
                               </li>
            <li class="common-drawer-see-li li2">
                                 <span class="common-drawer-see-li-title">权限描述</span>
                                 {{ formData.B3 }}
                               </li>
             </ul>
                                    </div>
                                    <div class="edit" v-if="drawerProp.status==='edit' || drawerProp.status==='add'">
                                      <el-form :model="formData" ref="drawerFrom0" class="common-drawer-edit">
                                      <el-form-item label="角色名称" prop="B1"  class="common-drawer-edit-li " :rules="[{ required: true, message: '请输入角色名称', trigger: 'blur' }]">
                                 <el-input placeholder="请输入角色名称" v-model="formData.B1" :disabled="false" clearable/>
                              </el-form-item>
            <el-form-item label="资源序号" prop="B2" class="common-drawer-edit-li " :rules="[{ required: true, message: '请选择资源序号', trigger: 'change' }]">
                                           <el-checkbox-group v-model="formData.B2" :disabled="false">
                                            <el-checkbox v-for="item in formDataOption.B2Option" :label="item.value" :key="item.value">{{ item.label }}</el-checkbox>
                                          </el-checkbox-group>
                                        </el-form-item>
                        <el-form-item label="权限描述" prop="B3"  class="common-drawer-edit-li li2" :rules="[]">
                                 <el-input placeholder="请输入权限描述" v-model="formData.B3" :disabled="false" clearable/>
                              </el-form-item>
             </el-form>
                                    </div>
                                </li>
           </ul>
                </div>
                </div>
                  <!--操作按钮-->
                  <template>
                    <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='add'">
                      <el-button icon="el-icon-close el-icon--left" @click="drawerProp.isDrawer=false">取 消</el-button>
                      <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('add')">保 存</el-button>
                </div>
                  <div class="common-drawer-title-add-edit" v-if="drawerProp.status==='edit'">
                    <el-button icon="el-icon-close el-icon--left" @click="drawerSubmitForm('see')">取 消</el-button>
                    <el-button type="primary" icon="el-icon-check el-icon--left" @click="drawerSubmitForm('edit')">保 存</el-button>
                </div>
                  
                </template>
                </div>
                </el-drawer>

                  <!--dialog 集合-->
                  
                  

                  <!--tabs和table dialog 字段选择显示问题-->
                 <el-dialog
        :append-to-body="true"
        :close-on-click-modal="false"
        :show-close="true"
        :close-on-press-escape="false"
        :title="toConfigureFieldDialog.title"
        :visible.sync="toConfigureFieldDialog.isDialog"
        custom-class="toConfigure-field-dialog"
        @close="tabsOrTableCancel"
        width="1060px"
    >
      <div class="toConfigure-field-dialog-content" v-loading="toConfigureFieldDialog.loading">
        <div class="left">
          <el-input placeholder="搜索字段" v-model="toConfigureFieldDialog.search" class="input-with-select">
            <el-button slot="append" icon="el-icon-search" @click="tabsOrTableSearch(toConfigureFieldDialog.search)"/>
          </el-input>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <template v-for="(item,key) in toConfigureFieldDialog[toConfigureFieldDialog.status]">
                  <dl :key="key" class="content" v-if="item.show">
                    <dt>{{ item.name }}</dt>
                    <dd>
                      <template v-for="(item2, key2) in item.option">
                        <el-checkbox v-model="item2.checkbox" @change="tabsOrTableChecked(item2)" :key="key2" v-if="item2.show" :disabled="item2.disabled">
                          <el-tooltip class="item" :disabled="item2.label.length<8" effect="dark" :content="item2.label" placement="top-start" :key="key">
                            <div class="tooltip">{{ item2.label }}</div>
                          </el-tooltip>
                        </el-checkbox>
                      </template>
                    </dd>
                  </dl>
                </template>
              </el-scrollbar>
            </div>
          </div>
        </div>

        <div class="right">
          <div class="title">
            已选择（{{ toConfigureFieldDialog.selectNum }}）
          </div>
          <div class="parent">
            <div class="child">
              <el-scrollbar wrap-class="scrollbar-x" style="height: 100%">
                <!--tabs配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tabsProp'">
                  <draggable v-model="toConfigureFieldDialog.draggableProp">
                    <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                      <li :key="key">
                        <i class="el-icon-thumb"/><span>{{ item.label }}</span><i class="el-icon-close" @click="tabsOrTableClose(item,key)" v-show="!item.disabled"></i>
                      </li>
                    </template>
                  </draggable>
                </ul>
                <!--table配置-->
                <ul class="content" v-if="toConfigureFieldDialog.status==='tableProp'">
                  <template v-for="(item,key) in toConfigureFieldDialog.draggableProp">
                    <li :key="key">
                      <i class="el-icon-thumb"/><span>{{ item.label }}</span>
                      <el-select v-model="item.fixed" class="frozenSelect">
                        <el-option v-for="item in $store.state.tableFixed" :key="item.value" :label="item.label" :value="item.value"/>
                      </el-select>
                      <i class="el-icon-close" @click="tabsOrTableClose(item,key)"></i>
                    </li>
                  </template>
                </ul>
              </el-scrollbar>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="toConfigure-field-dialog-footer">
        <el-button type="danger" @click="tabsOrTableDialogReductionInit(toConfigureFieldDialog.status)" icon="el-icon-delete el-icon--left">还原初始化</el-button>
        <el-button @click="tabsOrTableCancel" icon="el-icon-close el-icon--left">取 消</el-button>
        <el-button type="primary" @click="tabsOrTableDetermine" icon="el-icon-check el-icon--left">确 定</el-button>
      </div>
    </el-dialog>
                </div>
                </template>
                  <script>
                    import draggable from 'vuedraggable'
                    export default {
                    name: 'navigation17',
                    components: {draggable},
                    props: [],
                    data() {
                    return {
                    //接口名称
                    apiProp: {
                    tableInit: 'navigation17List',//表格初始化
                    tableAddEdit: 'navigation17AddEdit',//表格增加和编辑接口
                    tableDel: 'navigation17Del',//表格删除接口
                    tableQuery: 'navigation17Query',//表格查一条接口
                    tableBatchDel: 'navigation17BatchDel',//批量删除接口
                    tabsOrTableId: 17,//设置搜索条件和表头id
                    selectApiBoolean: false,//比初始化接口先运行的接口是否先运行完成
                  },
                    headersData: {token:window.localStorage.getItem('token')},//导入之类要用

                    //title 配置
                    titleProp:{},

                    //tabs 配置
                    tabsProp: {
                    active: '',
                    statusField: 'status',//切换的字段名
                    SearchDropDown: true,//高级搜索下拉默认显示状态
                    liHtmlNum: '',//有高级搜索时候差几个li
                  },
                    //tabs 搜索字段
                    tabsSearchData: {},
                    //tabs 选项
                    tabsSearchOption:{
                    },

                    //table 数据
                    tableData: [{//第1个表格值开始 
    B1:'开发工程师',//角色名称
    B2:['0'],//资源序号
    B3:'',//权限描述
},//第1个表格值结束
                    ],
                    tableProp: {
                    loading: false,
                    tableHeight: 0,
                    tableSelectAll: [],//表格多选的值
                  },
                    // table 选项
                    tableSearchOption: {},
                    //table dialog data
                    tableDialogProp:{},

                    // 抽屉 值
                    formData:{id: '',
      B1:'',//角色名称
              B2:['0'],//资源序号
                        B3:'',//权限描述
              },
                    // 抽屉 选项
                    formDataOption:{//资源序号 选项
                                   B2Option:[
                                {label:'首页',value:'0'},
{label:'运营看板',value:'1'},
{label:'公告管理',value:'16'},
{label:'物资管理',value:'2'},
{label:'财务管理',value:'3'},
{label:'审批管理',value:'4'},
{label:'文档管理',value:'5'},
{label:'经营策略',value:'6'},
{label:'员工中心',value:'7'},
{label:'人事管理',value:'8'},
{label:'角色管理',value:'9'},
{label:'考勤管理',value:'10'},
{label:'客户管理',value:'11'},
{label:'项目管理',value:'12'},
{label:'产品管理',value:'13'},
{label:'字典管理',value:'14'},
{label:'系统设置',value:'15'},

                        ],
                },
                    //抽屉 配置
                    drawerProp: {
                    isDrawer: false,
                    loading: false,
                    title: '',
                    seeBut:true,//是否是 查看/编辑 只有查看就是false
                    active: 0,//左边选择了哪个
                    status: 'add',// add 新增  see 查看
                    leftProp: ["基础设置",],
                    rightProp: {
                    height: document.documentElement.clientHeight - 90,//右边高度
                  }
                  },

                    //分页配置
                    paginationProp: {
                    currentPage: 1,//当前第几页
                    pageSize: 10,//每页几条
                    total: 0,//总数
                  },
                    //tabs和table dialog 字段选择显示
                    toConfigureFieldDialog: {
                    isDialog: false,
                    title: '筛选项配置',
                    loading: false,
                    status: 'tabsProp',
                    search: '',//搜索的值
                    selectNum: 0,//选择的数量
                    frozenFrontNum: 0,//冻结前几条
                    frozenAfterNum: 0,//冻结后几条
                    draggableProp: [],//拖拽数据
                    tabsProp:[
                    {
                                            name: '基础设置',//标题
                                            show: true,//搜索是否显示
                                            option: [
                                              ]
                                          },
            ],
                    tableProp:[
                    {
                                            name: '基础设置',//标题
                                            show: true,//搜索是否显示
                                            option: [
                                              {checkbox: true, label: '角色名称', show: true, order: 0},
              {checkbox: true, label: '权限描述', show: true, order: 0},
              ]
                                          },
            ]
                  }
                  };
                  },
                    activated(){
                        },
                    mounted() {
                    //高级搜索差几个li
                    this.tabsOrTableInit();
                    this.initData();//数据初始化
                    this.calculationHeight();//table计算高度
                    //监听浏览器变化
                    window.onresize = () => {
                    return (() => {
                    this.calculationHeight();//table计算高度
                  })();
                  };
                  },
                    watch: {
                    //主要作用监听赋值给table高度
                    'tabsProp.SearchDropDown'() {
                    this.calculationHeight();//table计算高度
                  },
                  },
                    computed:{
                    },
                    methods: {
                    //初始化
                      initData() {
                          let isDemo=true;
                if(isDemo){
                  return false
                }
                
                          this.tableProp.loading = true;
                          //下拉接口
                          let variableArray = [];//变量数组
                          if (!this.apiProp.selectApiBoolean) {
                            // const form1=new Promise((resolve)=>{
                            // this.$().then((result) => {
                            //   console.log(result);
                            // this.empUnitIdOption = result.map(item => ({
                            //  label: item.unitName,
                            //  value: item.id
                            //  }));
                            // resolve()
                            // })
                            // })
                            // variableArray.push(form1)
                            this.apiProp.selectApiBoolean = true;
                          }
                          Promise.all(variableArray).then(() => {
                            if (this.apiProp.tableInit) {
                              let params = {
                                page: this.paginationProp.currentPage,
                                row: this.paginationProp.pageSize,
                                 }
                              params[`${this.tabsProp.statusField}`] = this.tabsProp.active==0?'':this.tabsProp.active;
                              this[`$${this.apiProp.tableInit}`](params).then((result) => {
                                if (result.data) {
                                if (result.data.length == 0) {
                                  if (this.paginationProp.currentPage != 1) {
                                    this.paginationProp.currentPage = this.paginationProp.currentPage - 1;
                                    this.initData()
                                    return false;
                                  }
                                }
                                  this.tableData = result.data.map(item => ({
                                    id:item.id,
                                    B1: item.B1,//角色名称
              B3: item.B3,//权限描述
               }));
                                  this.paginationProp.total = result.count;//总数
                                  this.tableProp.loading = false;
                                } else {
                                  this.tableData = [];
                                  this.paginationProp.total = result.count;//总数
                                  this.tableProp.loading = false;
                                }
                              }, () => {
                                this.tableProp.loading = false;
                              })
                            } else {
                              this.tableProp.loading = false;
                            }
                          })
                        },
                    //table 点击查看
                  tableSeeClick(row, key)
                  {
                    this.drawerProp.isDrawer = true;
                    this.drawerProp.title = '详细信息';
                    this.drawerProp.status = 'see';
                    if (key !== undefined) {
                      this.drawerActiveClick(key)
                    }
                    let isDemo=true;
                if(isDemo){
                  this.formData.B1 = row.B1;//角色名称
                this.formData.B2 = row.B2;//资源序号
                this.formData.B3 = row.B3;//权限描述
                
                  return false
                }
                    this.formData = this.$options.data().formData;
                    this.drawerProp.loading = true;
                    let params = {
                      id: row.id
                    }
                    this[`$${this.apiProp.tableQuery}`](params).then((result) => {
                      this.formData.id = result.data.id;
                      this.formData.B1 = result.data.B1;//角色名称
                this.formData.B2 = result.data.B2 ? result.data.B2.split(",") : [];//资源序号
                this.formData.B3 = result.data.B3;//权限描述
                 this.drawerProp.loading = false;
                    })
                  },
                    //抽屉 点击保存 和取消
              drawerSubmitForm(status) {
                if (status === 'see') {
                  this.drawerProp.status = 'see';
                  this.tableSeeClick({id: this.formData.id}, this.drawerProp.active);
                  return false
                }
                 //新增不是数组
                let variableArray = [];//变量数组
                variableArray.push('form' + 0);
                  variableArray[0] = new Promise((resolve) => {
                    this.$refs['drawerFrom0'].validate((valid) => {
                      if (valid)
                        resolve()
                    })
                  })
           Promise.all(variableArray).then(() => {
                    this.drawerProp.loading = true;
                    let data = {
                      id: this.formData.id,
                      B1 : this.formData.B1,//角色名称
                B2 : this.formData.B2.toString(),//资源序号
                B3 : this.formData.B3,//权限描述
                 }
                    this[`$${this.apiProp.tableAddEdit}`](data).then(() => {
                        this.$message.success('保存成功');
                        this.initData();
                        if (status === 'add') {
                          this.drawerProp.isDrawer = false;
                          this.drawerProp.loading = false;
                        } else {
                          this.drawerProp.loading = false;
                          this.drawerProp.status = 'see';
                          this.tableSeeClick({id: this.formData.id})
                        }
                      }, () => {
                        this.drawerProp.loading = false;
                      })
                    })
              },
                    //抽屉 点击编辑
            drawerEdit(key, handle) {
               console.log(handle);
              this.drawerProp.title = '修改详细信息';
              this.drawerProp.status = 'edit';
              this.drawerActiveClick(key);
            },
                     //title 新增角色 点击
                          titleAddClick() {
                            this.formData = this.$options.data().formData;
                            this.drawerProp.isDrawer = true;
                            this.drawerProp.loading = false;
                            this.drawerProp.title = '新增角色';
                            this.drawerProp.status = 'add';
                            this.drawerActiveClick(0)
                          },
              //tabs 高级搜索 重置按钮
              tabsSearchReset() {
                this.tabsSearchData = this.$options.data().tabsSearchData;
              },
              //tabs 高级搜索 查询按钮点击
              tabsSearchDetermine() {
                this.paginationProp.currentPage = 1;//当前第几页
                this.initData();
              },
              //tabs 切换点击
              tabsSwitchClick() {
                this.paginationProp.currentPage = 1;//当前第几页
                this.initData();
              },
              //table 分页 选择了每页几条
              pageSizeChange(val) {
                this.paginationProp.currentPage = 1;//当前第几页
                this.paginationProp.pageSize = val;//每页几条
                this.initData();
              },
              //table 分页 点击了跳转到第几页
              pageCurrentChange(val) {
                this.paginationProp.currentPage = val;//当前第几页
                this.initData();
              },
              //table 多选
              tableSelectionChange(val) {
                this.tableProp.tableSelectAll = [];
                for (let i = 0; i < val.length; i++) {
                  this.tableProp.tableSelectAll.push(val[i].id)
                }
              },
              //table 点击删除
              tableDelClick(row) {
                this.$confirm('此操作将永久删除, 是否继续?', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  let data = {
                    id: row.id
                  }
                  this[`$${this.apiProp.tableDel}`](data).then(() => {
                    this.$message.success('删除成功');
                    this.initData();
                  })
                }).catch(() => {
                  this.$message.info('已取消删除');
                });
              },
              //抽屉左边 点击切换标题
              drawerActiveClick(key) {
                setTimeout(() => {
                  let scrollHeight = 0;
                  this.drawerLiArray = [];
                  for (let i = 0; i < this.drawerProp.leftProp.length; i++) {
                    this.drawerLiArray.push(this.$refs[`drawerLi${i}`].scrollHeight);
                    if (key > i) {
                      scrollHeight += this.$refs[`drawerLi${i}`].scrollHeight
                    }
                  }
                  this.$refs.scrollViewRight.scrollTo(0, scrollHeight);
                  this.drawerProp.active = key;
                }, 300)
              },
              //抽屉右边 监听鼠标滚动
              addWheelChange() {
                setTimeout(() => {
                  let scrollTop = 0;
                  for (let i = 0; i < this.drawerLiArray.length; i++) {
                    scrollTop += this.drawerLiArray[i];
                    if (scrollTop > this.$refs.scrollViewRight.scrollTop) {
                      this.drawerProp.active = i;
                      return false;
                    }
                  }
                }, 300)
              },
              //附件下载
              uploadFileDownload(url, item) {
                //下载不了是跨域的问题
                const URL = url
                window.URL = window.URL || window.webkitURL
                let xhr = new XMLHttpRequest()
                xhr.open('get', URL, true)
                xhr.responseType = 'blob'
                xhr.onload = function () {
                  if (this.status == 200) {
                    //得到一个blob对象
                    let blob = this.response
                    let fileUrl = window.URL.createObjectURL(blob)
                    let a = document.createElement('a')
                    ;(document.body || document.documentElement).appendChild(a)
                    a.href = fileUrl
                    if ('download' in a) {
                      a.download = item.name
                    } else {
                      a.setAttribute('download', item.name)
                    }
                    a.target = '_self'
                    a.click()
                    a.remove()
                  }
                }
                xhr.send()
              },
              //图片放大下载 开始
              clickImage() {
                this.$nextTick(() => {
                  let wrapper = document.getElementsByClassName(
                      'el-image-viewer__actions__inner'
                  )
                  let downImg = document.createElement('i')
                  downImg.setAttribute('class', 'el-icon-download')
                  wrapper[0].appendChild(downImg)
                  if (wrapper.length > 0) {
                    this.wrapperElem = wrapper[0]
                    this.cusClickHandler()
                  }
                })
              },
              cusClickHandler() {
                this.wrapperElem.addEventListener('click', this.hideCusBtn)
              },
              hideCusBtn(e) {
                let className = e.target.className
                if (className === 'el-icon-download') {
                  let imgUrl = document.getElementsByClassName(
                      'el-image-viewer__canvas'
                  )[0].children[0].src
                  this.downloadImage(imgUrl)
                }
              },
              downloadImage(imgUrl) {
                let tmpArr = imgUrl.split('/')
                let fileName = tmpArr[tmpArr.length - 1]
                window.URL = window.URL || window.webkitURL
                let xhr = new XMLHttpRequest()
                xhr.open('get', imgUrl, true)
                xhr.responseType = 'blob'
                xhr.onload = function () {
                  if (this.status == 200) {
                    //得到一个blob对象
                    let blob = this.response
                    let fileUrl = window.URL.createObjectURL(blob)
                    let a = document.createElement('a')
                    ;(document.body || document.documentElement).appendChild(a)
                    a.href = fileUrl
                    if ('download' in a) {
                      a.download = fileName
                    } else {
                      a.setAttribute('download', fileName)
                    }
                    a.target = '_self'
                    a.click()
                    a.remove()
                  }
                }
                xhr.send()
              },
              //图片放大下载结束
              //table 批量删除
              tableTitleButBatchDel() {
                this.$confirm('此操作将永久删除, 是否继续?', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  let params = {
                    ids: this.tableProp.tableSelectAll.length > 0 ? this.tableProp.tableSelectAll.toString() : ''
                  }
                  this[`$${this.apiProp.tableBatchDel}`](params).then(() => {
                    this.$message.success('批量删除成功');
                    this.initData();
                  })
                }).catch(() => {
                  this.$message.info('已取消批量删除');
                });
              },
              //table 计算高度
              calculationHeight() {
                setTimeout(() => {
                  this.tableProp.tableHeight = document.documentElement.clientHeight - 220 - this.$refs.title.clientHeight - this.$refs.tabs.clientHeight - this.$refs.tableTopBut.clientHeight;
                }, 300)
              },
              //tabs or table dialog 初始化
              tabsOrTableInit() {
                this.toConfigureFieldDialog.loading = true;
                let data = {
                  tableId: this.apiProp.tabsOrTableId
                }
                this.$commonApi2(data).then((result) => {
                  if (result.data && result.data.data) {
                    this.toConfigureFieldDialog = JSON.parse(result.data.data);
                  } else {
                    this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
                  }

                  this.toConfigureFieldDialog.isDialog = false;
                  this.toConfigureFieldDialog.loading = false;
                  let tabsFieldPropNum = 0; //有几个li
                  for (let i = 0; i < this.toConfigureFieldDialog.tabsProp.length; i++) {

                    for (let j = 0; j < this.toConfigureFieldDialog.tabsProp[i].option.length; j++) {
                      if (this.toConfigureFieldDialog.tabsProp[i].option[j].checkbox) {
                        tabsFieldPropNum++
                      }
                    }
                  }
                  if (this.$refs.commonTabsFrom) {
                    let aLineNum = parseInt((this.$refs.commonTabsFrom.clientWidth / 462).toString());//一行几个
                    this.tabsProp.liHtmlNum = aLineNum - tabsFieldPropNum % aLineNum - 1;//差几个li
                  }
                })
              },
              //tabs or table dialog 点击搜索
              tabsOrTableSearch(search) {
                if (search) {
                  for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                    let oneShow = false;//第一层是否显示
                    for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                      if (this.Utils.fuzzySearch(search, this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label)) {
                        this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
                        oneShow = true;
                      } else {
                        this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = false;
                      }
                    }
                    this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = oneShow;
                  }
                } else {
                  for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                    this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].show = true;
                    for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                      this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].show = true;
                    }
                  }
                }
              },
              //tabs or table dialog 拖动点击删除
              tabsOrTableClose(item, key) {
                this.toConfigureFieldDialog.draggableProp.splice(key, 1);
                for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                  for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                    if (this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label === item.label) {
                      this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].checkbox = false;
                    }
                  }
                }
              },
              //tabs or table dialog 清空以前的设置
              tabsOrTableDialogEmpty() {
                this.$confirm('此操作将永久清空搜索和表头设置, 是否继续?', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  let data = {
                    tableId: this.apiProp.tabsOrTableId,
                    data: null
                  }
                  this.$commonApi(data).then(() => {
                    this.$message.success('清空设置成功');
                    this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
                  })
                }).catch(() => {
                  this.$message.info('已取消清空设置');
                });
              },
              //tabs or table dialog 还原初始化
              tabsOrTableDialogReductionInit(status) {
                this.toConfigureFieldDialog.loading = true;
                let data = {
                  tableId: this.apiProp.tabsOrTableId,
                }
                this.$commonApi2(data).then((result) => {
                  if (result.data && result.data.data) {
                    this.toConfigureFieldDialog = JSON.parse(result.data.data);
                  } else {
                    this.toConfigureFieldDialog = this.$options.data().toConfigureFieldDialog;
                  }
                  this.toConfigureFieldDialog.status = status;
                  this.toConfigureFieldDialog.draggableProp = [];
                  for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
                    for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
                      if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
                        this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
                      }
                    }
                  }
                  this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
                  this.toConfigureFieldDialog.isDialog = true;
                  this.toConfigureFieldDialog.loading = false;
                })
              },
              //tabs or table dialog 点击 关闭 取消
              tabsOrTableCancel() {
                this.tabsOrTableInit();
              },
              //tabs or table dialog 点击确定
              tabsOrTableDetermine() {
                this.toConfigureFieldDialog.loading = true;
                this.toConfigureFieldDialog.search = '';
                this.tabsOrTableSearch(this.toConfigureFieldDialog.search);
                for (let i = 0; i < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status].length; i++) {
                  for (let j = 0; j < this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option.length; j++) {
                    for (let k = 0; k < this.toConfigureFieldDialog.draggableProp.length; k++) {
                      if (this.toConfigureFieldDialog.draggableProp[k].label === this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].label) {
                        this.toConfigureFieldDialog[this.toConfigureFieldDialog.status][i].option[j].order = k;
                      }
                    }
                  }
                }
                let data = {
                  tableId: this.apiProp.tabsOrTableId,
                  data: JSON.stringify(this.toConfigureFieldDialog)
                }
                this.$commonApi(data).then(() => {
                  this.$message.success('保存成功');
                  this.tabsOrTableInit();
                  this.tabsSearchData = this.$options.data().tabsSearchData;
                  this.initData();
                })
              },
              //tabs or table dialog 点击选择
              tabsOrTableChecked(item) {
                if (item.checkbox) {
                  this.toConfigureFieldDialog.draggableProp.push(item)
                } else {
                  for (let i = 0; i < this.toConfigureFieldDialog.draggableProp.length; i++) {
                    if (this.toConfigureFieldDialog.draggableProp[i].label === item.label) {
                      this.toConfigureFieldDialog.draggableProp.splice(i, 1);
                    }
                  }
                }
                this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
              },
              //tabs table 设置图标和按钮 dialog拖拽
              tabsOrTableSetClick(status, title) {
                this.toConfigureFieldDialog.loading = true;
                this.toConfigureFieldDialog.isDialog = true;
                let data = {
                  tableId: this.apiProp.tabsOrTableId,
                }
                this.$commonApi2(data).then((result) => {
                  if (result.data && result.data.data) {
                    this.toConfigureFieldDialog = JSON.parse(result.data.data)
                  }
                  this.toConfigureFieldDialog.title = title;
                  this.toConfigureFieldDialog.status = status;
                  this.toConfigureFieldDialog.draggableProp = [];
                  for (let i = 0; i < this.toConfigureFieldDialog[status].length; i++) {
                    for (let j = 0; j < this.toConfigureFieldDialog[status][i].option.length; j++) {
                      if (this.toConfigureFieldDialog[status][i].option[j].checkbox) {
                        this.toConfigureFieldDialog.draggableProp.push(this.toConfigureFieldDialog[status][i].option[j])
                      }
                    }
                  }
                  //排序
                  this.toConfigureFieldDialog.draggableProp.sort(function (p1, p2) {
                    return p1.order - p2.order
                  })
                  this.toConfigureFieldDialog.selectNum = this.toConfigureFieldDialog.draggableProp.length;
                  this.toConfigureFieldDialog.loading = false;
                })
              },
       //tabs 高级搜索 重置按钮
                  },
                  };
                    </script>
                    <style lang="scss" scoped></style>
                    